<template>
  <div class="login-page">
    <div class="login-div">
      <h2 class="title"><%=project_name%></h2>
      <Tabs :value="isDDloginType" @on-click="tabOnClick">
        <TabPane icon="md-lock" label="账户密码登录" name="password" />
        <TabPane icon="md-qr-scanner" label="钉钉扫码登录" name="ding" />
      </Tabs>
      <Form v-show="isDDloginType === 'password'" ref="formValidate" class="login-from" :model="loginForm" :rules="loginCheck">
        <FormItem prop="username">
          <Input v-model="loginForm.username" prefix="ios-person-outline" type="text" autofocus clearable placeholder="请输入用户名" @keyup.enter.native="login('formValidate')" />
        </FormItem>
        <FormItem prop="password">
          <Input v-model="loginForm.password" prefix="ios-lock-outline" type="password" clearable placeholder="请输入密码" @keyup.enter.native="login('formValidate')" />
        </FormItem>
        <!--              <FormItem prop="rememberMe" class="rememberMe">-->
        <!--                <Checkbox v-model="loginForm.rememberMe">记住我</Checkbox>-->
        <!--              </FormItem>-->
        <FormItem>
          <Button type="primary" long :loading="loading" @click="login('formValidate')">
            <span v-if="!loading">登录</span>
            <span v-else>请稍后...</span>
          </Button>
        </FormItem>
      </Form>
      <div v-show="isDDloginType === 'ding'" class="ding-form">
        <div id="loginContainer" />
        <ding-qr :is-d-dlogin-type="isDDloginType" :redirect="redirect" />
      </div>
    </div>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import { encrypt, decrypt } from '@/utils/jsencrypt'
import DingQr from '@/components/DingQr/DingQr'
import '@/assets/plugin/canvas-nest.min'
const systemId = process.env.VUE_APP_BMS_SYSTEM_ID || 9999
export default {
  name: 'Login',
  filters: {},
  components: {
    DingQr
  },
  data() {
    return {
      loading: false,
      isDDloginType: 'password',
      loginForm: {
        username: '',
        password: '',
        rememberMe: true
      },
      fullWidth: document.documentElement.clientWidth,
      loginCheck: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  beforeCreate() {
    document.getElementsByTagName('canvas')[0].className = 'index_bg'
  },
  beforeDestroy: function() {
    document.getElementsByTagName('canvas')[0].removeAttribute('class', 'index_bg')
  },
  created() {
    this.storeUtil.clearAllStore()
    this.getCookie()
  },
  mounted() {
    this.getSSO()
  },
  methods: {
    tabOnClick(name) {
      this.isDDloginType = name
    },
    /**
     * @Author Tangyuhui
     * @Description 获取单点登录token
     * @Date 2020-04-22 16:15:14 星期三
     */
    getSSO() {
      const env = process.env.VUE_APP_SSO_ENV || 'development'
      this.loading = true
      window.zhnxSSO.getToken({ env: env, systemId }).then(ret => {
        if (ret && ret.data && ret.data.code === '1000') {
          this.$store.dispatch('saveBmsMsg', ret.data.result)
          this.$router.push({ path: this.redirect || '/' }).catch(() => {})
        }
        this.loading = false
      }).catch(error => {
        this.loading = false
        console.log('created -> error', error)
      })
    },
    getCookie() {
      const username = Cookies.get('username')
      const password = Cookies.get('password')
      const rememberMe = Cookies.get('rememberMe')
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password: password === undefined ? this.loginForm.password : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
      }
    },
    // 登陆
    login(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.loading = true
          if (this.loginForm.rememberMe) {
            Cookies.set('username', this.loginForm.username, { expires: 30 })
            Cookies.set('password', encrypt(this.loginForm.password), { expires: 30 })
            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 })
          } else {
            Cookies.remove('username')
            Cookies.remove('password')
            Cookies.remove('rememberMe')
          }
          this.$store.dispatch('bmsLogin', this.loginForm).then(() => {
            this.loading = false
            this.$router.push({ path: this.redirect || '/' }).catch(() => {})
          }).catch((e) => {
            // 登录表单校验失败
            this.showError(e)
            this.loading = false
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
    .index_bg{
     width: 100%;
     background: rgba(0,0,0,.6)!important;
     z-index: 1!important;
   }
    .login-page {
      position: relative;
      width: 100%;
      height:100%;
      overflow: hidden;
      background-size: cover;
      background-image: url('~@/assets/login_images/login-bg-2.jpg');
      background-position: center bottom;
        /* Header */
      height:100%;
        .login-div {
            position: absolute;
            margin-top: -220px;
             z-index:2;
            padding: 30px;
            text-align: center;
            top: 50%;
            left: 50%;
            background-color: white;
            border-radius: 5px;
            width: 410px;
            margin-left:-205px;
            &>.logo{
                img{
                    height: 90px;
                }
                span{
                    font-size: 14px;
                    margin-bottom: 20px;
                }
            }
            &>.login-from{
                .rememberMe{
                    width: 100%;
                    .ivu-form-item-content{
                        width: 100%;
                        display: inline-flex;
                        flex-direction: row;
                        justify-content: space-between;
                    }
                }
                .other-Login{
                    .ivu-form-item-content{
                        &>span{
                            img{
                                width: 24px;
                                margin-left: 16px;
                                cursor: pointer;
                                vertical-align: middle;
                                opacity: .7;
                                transition: all .2s ease-in-out;
                            }
                        }

                    }
                }
            }
        }
    }
   .title {
        margin: 0px auto 30px auto;
        text-align: center;
        color: #707070;
    }
</style>
